<template>
  <div>
      <h1>edit</h1>
      名称:<input type="text" v-model="user.name"><br>
      价格:<input type="text" v-model="user.price"><br>
      <button @click="handler">编辑完成</button>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
//通过props接收参数
const props = defineProps(['id', 'name', 'price'])

const router = useRouter();

//定义表单接收参数
const user = ref({
  name: '',
  price:''
})
//定义编辑函数
const handler = e => {
  //判断值是否存在 防止报错
  if (user.value.name.length > 0 && user.value.price.length > 0) {
      //通过queryString方式将参数传递给table组件
      router.push({ path: '/', query: { id:props.id,name:user.value.name,price:user.value.price } })
  }
}

</script>

<style lang="scss" scoped>

</style>